<template>
  <div :class="{'form_field_checked':checked === true}" class="form_field"
         style="cursor: pointer;">

    <a-form-item
        :colon="false"
        style="padding-left: 10px;margin-top: 15px;"
        :label="fieldName"
    >
      <a-input v-if="fieldDataType === 'text'"
                :value="inputValue" @input="$emit('update:inputValue', $event.target.value)"/>
      <a-input-number
                      v-if="fieldDataType === 'counter'" :value="inputValue" @change="$emit('update:inputValue',$event)"/>
      <a-date-picker
                     v-if="fieldDataType === 'date'" :value="inputValue" @input="$emit('update:inputValue', $event.target.value)"/>
      <a-radio-group
                     v-if="fieldDataType === 'radio'" :value="inputValue" @input="$emit('update:inputValue', $event.target.value)">
        <a-radio value="1">A</a-radio>
        <a-radio value="2">B</a-radio>
        <a-radio value="3">C</a-radio>
      </a-radio-group>

      <a-upload readonly
                v-if="fieldDataType === 'file'"
                name="file"
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
      >
        <a-button :disabled="ext.disabled">
          <upload-outlined></upload-outlined>
          点击上传
        </a-button>
      </a-upload>
    </a-form-item>

  </div>
</template>
<script setup>

const props = defineProps({
  fieldName:{
    type: String
  },
  fieldDataType:{
    type:String
  },
  inputValue: {
    type:String,
  }
})

const emits = defineEmits(['update:formField'])
</script>


<style scoped>
.form_field{
  margin: 5px;
}
</style>
